<!-- Buttons - Visible only on desktops-->
<div class="container bottomMarging">
  <div class="btn-group hidden-sm-down">
    <button type="button" class="btn btn-primary" (click)="updateCategory('awl')">AWL</button>
    <button type="button" class="btn btn-danger" (click)="updateCategory('hi')">High Frequency</button>
    <button type="button" class="btn btn-success" (click)="updateCategory('med')">Medium Frequency</button>
    <button type="button" class="btn btn-warning" (click)="updateCategory('low')">Low Frequency</button>
  </div>
</div>

<!-- Buttons - Visible only on cellphones-->
<div class="container bottomMarging">
  <div class="btn-group hidden-md-up" style="width: 200%;">
    <button type="button" class="btn btn-primary" (click)="updateCategory('awl')">AWL</button>
    <button type="button" class="btn btn-danger" (click)="updateCategory('hi')">High Frequency</button>
  </div>
</div>

<div class="container bottomMarging">
  <div class="btn-group hidden-md-up" style="width: 200%;">
    <button type="button" class="btn btn-success" (click)="updateCategory('med')">Medium Frequency</button>
    <button type="button" class="btn btn-warning" (click)="updateCategory('low')">Low Frequency</button>
  </div>
</div>

<!--Top page note-->
<div style="background-color: #e6e6e6; border-radius: 15px; min-height: 25px;">
  <p style="text-align: center;font-size: 0.9rem; ">
    <strong>Words are given alongside their inflectional & derivational forms</strong>
  </p>
</div>

<!--Alert-->
<div class="alert alert-danger" role="alert" *ngIf='errorSearch'>
  <strong>{{alertWord}} </strong> doesn't exist in data base.
</div>

<!--Search-->
<div class="form-group row">
  <div class="col col-md-8 col-xl-4">
    <input class="form-control" type="search" name="searchArea" [(ngModel)]="searchArea" id="example-search-input" placeholder="Word..">
  </div>
  <button class="btn btn-primary" (click)="searchWord();" [disabled]="!searchArea" required>Search</button>
</div>

<!--Table - shows the search result-->
<div class='table-responsive table-hover table-striped'>
  <table class='table table-hover'>
    <thead>
      <tr class="table-active">
        <th>Word</th>
        <th>Category</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngIf='showTable && !error' class="table-success">
        <td (click)="getDefinition(word.value); open(content);">
          <a href="javascript:void(0)">{{ word.value}}</a>
        </td>
        <td>{{word.category}}</td>
      </tr>
    </tbody>
  </table>
</div>


<!--Definition model (Popup)-->
<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">
      <img src="assets/images/Wikipedia-logo.png" title="Wikipedia Dictionary" style="width:50px;height:50px;"> Definition &nbsp;&nbsp;
      <i class="fa fa-spinner fa-spin" style="font-size:32px;color:black" *ngIf='processing'></i>
    </h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <!--Alert-->
    <div class="alert alert-warning" role="alert" *ngIf='error'>
      <strong>Oh snap!</strong> We couldn't find the definition, please try another word.
    </div>
    <!--Definition-->
    <p *ngIf='!error && !processing' class="card-text" [innerHTML]="wordDefinition.wiki.html"></p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
  </div>
</ng-template>

<!--Table-->
<div class='table-responsive table-hover table-striped' *ngIf='turnOn'>
  <table class='table table-hover'>
    <thead>
      <tr>
        <th>Word</th>
        <th>Category</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor='let word of page.content'>
        <td (click)="getDefinition(word.value); open(content);">
          <a href="javascript:void(0)">{{ word.value}}</a>
        </td>
        <td>{{wordCategory}}</td>
      </tr>
    </tbody>
  </table>

  <!--Pagination-->
  <div [ngSwitch]="activeCategory">
    <div *ngSwitchCase="'awl'">
      <ngb-pagination [collectionSize]="page.totalElements" [pageSize]="tableSize" [(page)]="awlpage" [maxSize]="4" [rotate]="true"
        [ellipses]="false" (pageChange)="getAWLWordList(awlpage)" [boundaryLinks]="true"></ngb-pagination>
    </div>
    <div *ngSwitchCase="'hi'">
      <ngb-pagination [collectionSize]="page.totalElements" [pageSize]="tableSize" [(page)]="hipage" [maxSize]="4" [rotate]="true"
        [ellipses]="false" (pageChange)="getHIWordList(hipage)" [boundaryLinks]="true"></ngb-pagination>
    </div>
    <div *ngSwitchCase="'med'">
      <ngb-pagination [collectionSize]="page.totalElements" [pageSize]="tableSize" [(page)]="medpage" [maxSize]="4" [rotate]="true"
        [ellipses]="false" (pageChange)="getMedWordList(medpage)" [boundaryLinks]="true"></ngb-pagination>
    </div>
    <div *ngSwitchCase="'low'">
      <ngb-pagination [collectionSize]="page.totalElements" [pageSize]="tableSize" [(page)]="lowpage" [maxSize]="4" [rotate]="true"
        [ellipses]="false" (pageChange)="getLowWordList(lowpage)" [boundaryLinks]="true"></ngb-pagination>
    </div>
    <hr class="bottomMarging">

    <!--Page Size-->
    <div class="btn-group col-md-4 float-right" ngbRadioGroup name="radioBasic" [(ngModel)]="tableSize">
      <label ngbButtonLabel class="btn-secondary">
        <input ngbButton type="radio" [value]="20" (click)="getWordList(0, activeCategory, 20, sort);resetPagination()"> 20
      </label>
      <label ngbButtonLabel class="btn-secondary">
        <input ngbButton type="radio" value="60" (click)="getWordList(0, activeCategory, 60, sort);resetPagination()"> 60
      </label>
      <label ngbButtonLabel class="btn-secondary">
        <input ngbButton type="radio" [value]="100" (click)="getWordList(0, activeCategory, 100, sort);resetPagination()"> 100
      </label>
    </div>

    <!--Sorting-->
    <div class="btn-group col-md-4" ngbRadioGroup name="radioBasic" [(ngModel)]="sorting">
      <label ngbButtonLabel class="btn-secondary">
        <input ngbButton type="radio" [value]="ASC" (click)="getWordList(0, activeCategory, tableSize, 'ASC' );resetPagination()"> ASC
      </label>
      <label ngbButtonLabel class="btn-secondary">
        <input ngbButton type="radio" value="DESC" (click)="getWordList(0, activeCategory, tableSize, 'DESC');resetPagination()"> DESC
      </label>
    </div>

    <div class="col-md-4" style="margin:0 auto;">
      <p>
        <strong>page: {{page.number + 1}} / {{page.totalPages}}</strong>
      </p>
    </div>
    <hr class="topMarging">
  </div>
</div>